<!DOCTYPE html>
<html>
<script type="text/javascript" src="../static/jquery-3.3.1.min.js"></script>
<link href="../static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
<link href="../static/DataTables/DataTables-1.10.18/css/dataTables.bootstrap.css" rel="stylesheet" />
<script src="../static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="../static/DataTables/DataTables-1.10.18/js/jquery.dataTables.js"></script>
<script src="../static/DataTables/DataTables-1.10.18/js/dataTables.bootstrap.js"></script>

<body>

<h1>datatable</h1>
<div class="col_2_3_right">  
    <div class="index_viewport">  
        <table id="example" cellpadding="0" cellspacing="0" border="0" width="50%">  
            <thead>  
                <tr> 
                	<th width="20%">序号</th>
                    <th width="20%">名称</th>  
                    <th width="20%">职位</th>  
                    <th width="35%">薪水</th>  
                    <th width="25%">部门</th>  
                </tr>  
            </thead>  
        </table>  
    </div>  
</div> 
<script>
function Employee ( name, position, salary, office ) {
    this.name = name;
    this.position = position;
    this.salary = salary;
    this._office = office;
    this.office = function() {
        return this._office;
    }
};
$(function(){
    $('#example').dataTable( {
    	 "data": [
        new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh"),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh")
    ],
    "columns": [
    	// { data: null},
        { data: 'name'},
        { data: 'salary'},
        { data: 'office'},
        { data: 'position'}
    ],
    "fnRowCallback": function (nRow, aData, iDisplayIndex,iDisplayIndexFull) {
    	console.log(nRow);
    	console.log(aData);
    	console.log(iDisplayIndex);
    	console.log(iDisplayIndexFull);
    	$("td:first", nRow).html(iDisplayIndexFull + 1);
            return nRow;
        }
  } );


})

</script>

</body>
</html>